<template>
	<view class="blogitem">
		<view class="head">
			<view class="userinfo">
				<view class="avatar">
					<image :src="giveAvatar(item)" mode="aspectFill"></image>
				</view>
				<view class="name">{{ giveName(item) }}</view>
				<view class="time">
					<!-- 一定时间戳范围内，显示某某分钟前 -->
					<uni-dateformat :date="item.publish_date" format="MM月dd hh:mm" :threshold="[60000, 3600000 * 24 * 30]"></uni-dateformat>
				</view>
			</view>

			<view class="more" @click="clickMore">
				<text class="iconfont icon-ellipsis"></text>
			</view>
		</view>

		<view class="body">
			<view class="title" @click="goDetail">{{ item.title }}</view>
			<view class="text" @click="goDetail" v-if="item.description">
				<view class="t">{{ item.description }}</view>
			</view>
			<view class="piclist" v-if="item.picurls.length">
				<view class="pic" :class="item.picurls.length == 1 ? 'only' : ''" v-for="(pic, index) in item.picurls" :key="index">
					<image @click="clickPic(index)" :src="pic" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<view class="info">
			<view class="box">
				<text class="iconfont icon-a-27-liulan"></text>
				<text>{{ item.view_count }}</text>
			</view>
			<view class="box" @click="goDetail">
				<text class="iconfont icon-a-5-xinxi"></text>
				<text>{{ item.comment_count || '评论' }}</text>
			</view>
			<view class="box" :class="item.isLike ? 'active':''" @click="clickLike">
				<text class="iconfont icon-a-106-xihuan"></text>
				<text>{{ item.like_count || '点赞' }}</text>
			</view>
		</view>

		<!-- 底部弹出 操作菜单 -->
		<u-action-sheet :actions="list" cancelText="取消" :show="sheetShow" @select="sheetSelect" @close="onClose"></u-action-sheet>
	</view>
</template>

<script>
	import pageJson from '@/pages.json';
import { giveName, giveAvatar, likeFun } from '../../utils/tools.js';
import { store } from '@/uni_modules/uni-id-pages/common/store.js';
const db = uniCloud.database()

export default {
	name: 'blog-item',
	data() {
		return {
			// 操作菜单选项
			sheetShow: false,
			list: [
				{
					name: '修改',
					type: 'edit',
					disabled: true
				},
				{
					name: '删除',
					type: 'del',
					color: '#F56C6C',
					disabled: true
				}
			]
		};
	},
	props: {
		item: {
			type: Object,
			default() {
				return {};
			}
		},
		isLike:Boolean,
		like_count:Number
	},
	methods: {
		giveName,
		giveAvatar,
		//点击图片
		clickPic(index) {
			uni.previewImage({
				urls: this.item.picurls,
				current: index
			});
		},

		//跳转到详情
		goDetail() {
			uni.navigateTo({
				url: '/pages_blog/detail/detail?id=' + this.item._id
			});
		},

		//点击更多权限校验
		clickMore() {
			let uid = uniCloud.getCurrentUserInfo().uid;
			//当前用户id和文章id相等  或者是管理员
			if (uid === this.item.user_id[0]._id || this.uniIDHasRole('admin') || this.uniIDHasRole('webmaster')) {
				// 拥有权限，list都改为可以修改状态
				this.list.forEach((item) => {
					item.disabled = false;
				});
			}
			this.sheetShow = true;
		},
		// 点击选择
		sheetSelect(e) {
			this.sheetShow = false;
			let type = e.type
			if(type === 'del'){
				this.delFun()
			}
		},
		onClose() {
			this.sheetShow = false;
		},
		//删除方法
		delFun(){
			uni.showLoading({
				title:"删除中"
			})
			db.collection('quanzi_article').doc(this.item._id).update({
				delState:true
			}).then(res =>{
				console.log(res);
				uni.hideLoading()
				uni.showToast({
					title:"删除成功",
					icon:"none"
				})
				// 无感操作,更新列表
				this.$emit('delEvent',true)
			}).catch(()=>{
				uni.hideLoading()
			})
		},
		
		// 点赞操作
		async clickLike(){
			//判断是否登录
			if (!store.hasLogin) {
				await this.showModalSync();
				return 
			}
			
			//节流
			let time = Date.now();
			if (time - this.likeTime < 500) {
				uni.showToast({
					title: '操作频繁',
					icon: 'none',
					mask: true //蒙版
				});
				return;
			}
			this.likeTime = time;
			//无感操作：前端来做按钮高亮，不是依靠数据库  不能直接改父组件数据
			// this.item.isLike ? this.item.like_count-- : this.item.like_count++;
			// this.item.isLike = !this.item.isLike;
			let like_count = this.item.like_count
			this.item.isLike ? like_count-- : like_count++
			let isLike = !this.item.isLike
			
			this.$emit('update:isLike', isLike)
			this.$emit('update:like_count', like_count)
			
			likeFun(this.item._id);
		},
		//点赞之前的校验 将showModal封装为同步方法
		async showModalSync() {
			const res = await new Promise((resolve, reject) => {
				uni.showModal({
					title: '登录后才可进行操作',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/' + pageJson.uniIdRouter.loginPage
							});
							resolve(res);
						} else {
							reject(res);
						}
					}
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.blogitem {
	.head {
		display: flex;
		font-size: 32rpx;
		align-items: center;
		justify-content: space-between;
		.userinfo {
			display: flex;
			align-items: center;
			.avatar {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				border-radius: 50%;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
			.name {
				color: #222;
				padding-left: 10rpx;
			}
			.time {
				color: #888;
				font-size: 22rpx;
				padding-left: 20rpx;
			}
		}
		.more {
			padding: 5rpx;
			.iconfont {
				font-size: 50rpx;
				color: #888;
			}
		}
	}

	.body {
		padding: 15rpx 0 30rpx;
		.title {
			font-size: 44rpx;
			color: #000;
			font-weight: 600;
			text-align: justify;
		}
		.text {
			padding-top: 10rpx;
			padding-bottom: 10rpx;
			font-size: 30rpx;
			text-align: justify;
			color: #888;
			.t {
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
		.piclist {
			display: flex;
			padding-top: 20rpx;
			.pic {
				width: 225rpx;
				height: 225rpx;
				margin-right: 6rpx;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
				&:first-child {
					border-radius: 20rpx 0 0 20rpx;
				}
				&:last-child {
					border-radius: 0 20rpx 20rpx 0;
				}
				&.only {
					border-radius: 20rpx;
				}
			}
		}
	}

	.info {
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 26rpx;
		color: #333;
		.box {
			display: flex;
			align-items: center;
			padding: 15rpx 0 5rpx;
			flex: 1;
			display: flex;
			justify-content: center;
			.iconfont {
				font-size: 40rpx;
				padding-right: 10rpx;
			}
		}
		
		.box.active{
			color: #0199FE;
		}
	}
}
</style>
